<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
import { mapState } from "vuex";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      chartEntity: null,
      allData: null,
      mapData: {},
      startValue: 0,
      endValue: 9,
      timer: null,
    };
  },
  // 计算属性,类似于data概念,有缓存效果,用于不经常修改的数据
  computed: {
    ...mapState(["theme"]),
  },
  // 监控data中的数据变化
  watch: {
    theme() {
      // 销毁当前图表
      this.chartEntity.dispose();
      this.initChart();
      this.screenAdapter();
      this.updateChart();
    },
  },
  // 方法集合
  methods: {
    // 初始化echart
    initChart() {
      this.chartEntity = this.$echarts.init(this.$refs.rank_ref, this.theme);
      let option = {
        title: {
          text: "地区销售排行",
          left: 20,
          top: 20,
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
          },
        ],
      };
      this.chartEntity.setOption(option);
      this.chartEntity.on("mouseover", () => clearInterval(this.timer));
      this.chartEntity.on("mouseout", () => this.startInterval());
    },
    // 获得数据
    getData(ret) {
      // let { data: ret } = await this.$http.get("rank");
      ret.sort((a, b) => b.value - a.value);
      this.allData = ret;
      // 刷新图表
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      const colorArr = [
        ["#0ba82c", "#4ff778"],
        ["#2e72bf", "#23e5e5"],
        ["#5052ee", "#ab6ee5"],
        ["#FF4500", "#FF8C00"],
      ];

      let provinceArr = [];
      let valueArr = [];
      this.allData.forEach((e) => {
        provinceArr.push(e.name);
        valueArr.push(e.value);
      });
      let dataOption = {
        xAxis: {
          data: provinceArr,
        },
        series: [
          {
            data: valueArr,
            itemStyle: {
              color: (arg) => {
                let temp = null;
                if (arg.value > 300) {
                  temp = colorArr[0];
                } else if (arg.value > 200) {
                  temp = colorArr[1];
                } else if (arg.value > 100) {
                  temp = colorArr[2];
                } else {
                  temp = colorArr[3];
                }
                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: temp[0],
                  },
                  {
                    offset: 1,
                    color: temp[1],
                  },
                ]);
              },
            },
          },
        ],
        dataZoom: {
          show: false,
          startValue: this.startValue,
          endValue: this.endValue,
        },
      };
      this.chartEntity.setOption(dataOption);
    },
    // 根据屏幕大小调整分辨率
    screenAdapter() {
      let title_font_size = (this.$refs.rank_ref.offsetWidth / 100) * 3.6;
      let adapterOption = {
        title: {
          textStyle: {
            fontSize: title_font_size,
          },
        },
        series: [
          {
            barWidth: title_font_size,
            itemStyle: {
              borderRadius: [title_font_size / 2, title_font_size / 2, 0, 0],
            },
          },
        ],
      };

      this.chartEntity.setOption(adapterOption);
      this.chartEntity.resize();
    },
    revertMap() {
      let revertOption = {
        geo: {
          map: "china",
        },
      };
      this.chartEntity.setOption(revertOption);
    },
    startInterval() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.startValue++;
        this.endValue++;
        if (this.endValue > this.allData.length - 1) {
          this.startValue = 0;
          this.endValue = 9;
        }
        this.updateChart();
      }, 2000);
    },
  },
  beforeCreate() {}, // 生命周期-创建之前
  created() {
    this.$socket.registerCallBack("rank", this.getData);
  }, // 生命周期-创建完成（可以访问当前this实例）
  beforeMount() {}, // 生命周期-挂载之前
  mounted() {
    this.initChart();
    // this.getData();
    this.$socket.send({
      action: "getData",
      socketType: "rank",
      chartName: "rank",
      value: "",
    });
    // 不要在函数中加(), 否则只会调用一次
    window.addEventListener("resize", this.screenAdapter);
    // 加载完成后自动适配分辨率
    this.screenAdapter();
    // 自动平移
    this.startInterval();
  }, // 生命周期-挂载完成（可以访问DOM元素）
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  beforeUpdate() {}, // 生命周期-更新之前
  updated() {}, // 生命周期-更新之后
  beforeDestroy() {}, // 生命周期-销毁之前
  destroyed() {
    // 销毁自适应
    window.removeEventListener("resize", this.screenAdapter);
    // 销毁自动平移
    clearInterval(this.timer);

    this.$socket.unRegisterCallBack("rank");
  }, // 生命周期-销毁完成
};
</script>

<style scoped>
</style>
